<template>
	<view class="container">
		<form @submit="send">
			<view class="form bg-fff">
				<view class="form-item flex-space-between">
					<view class="form-label">头像</view>
					<view class="form-value flex-align-center">
						<!-- #ifdef MP -->
							<button class="u-reset-button flex-align-center" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="form-value-avatar" :src="userInfo.avatarUrl || $setting.avatarUrl()"></image>
								<u-icon name="arrow-right" color="#CCCCCC" size="28"></u-icon>
							</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<button class="u-reset-button flex-align-center"  @click="uploadImg">
							<image class="form-value-avatar" :src="userInfo.avatarUrl || $setting.avatarUrl()"></image>
							<u-icon name="arrow-right" color="#CCCCCC" size="28"></u-icon>
						</button>
						<!-- #endif -->
					</view>
				</view>
				<view class="form-item flex-space-between">
					<view class="form-label">会员ID</view>
					<view class="form-value flex-align-center">{{userInfo.user_id}}</view>
				</view>
				<view class="form-item flex-space-between">
					<view class="form-label">昵称</view>
					<view class="form-value flex-align-center">
						<input v-model="userInfo.nickName" name="nickname" type="nickname" placeholder="请输入昵称" />
					</view>
				</view>
				<view class="form-item flex-space-between">
					<view class="form-label">手机号</view>
					<view class="form-value flex-align-center">
						<button class="u-reset-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" @bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">{{userInfo.mobile || "点击绑定手机号"}}</button>
					</view>
				</view>
			</view>
			
			<button class="u-reset-button form-button flex-center" hover-class="form-button-hover" form-type="submit">保存</button>
			<button v-if="is_logout==1" style="margin-top: 50rpx;" class="u-reset-button form-button flex-center" hover-class="form-button-hover" @click="logout()">退出</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: uni.getStorageSync('token'),
				app_id: uni.$setting.appId,
				userInfo: {},
				sessionKey: "",
				is_logout:0,
			};
		},
		onShow() {
			// #ifdef H5
			  this.is_logout = 1;
			// #endif
			uni.login({
				provider: 'weixin',
				success: (res) => {
					uni.$u.api.postSession({
						code: res.code
					}).then(res => {
						this.sessionKey = res.session_key;
					})
				},
			});
			this.getHttp();
		},
		methods: {
			
			uploadImg(){
				var url =this.$setting.baseUrl()+'/file.upload/image';
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
					
						var tempFilePaths = res.tempFilePaths
						var post_data = {};
						var avatarUrl = tempFilePaths[0];
						uni.uploadFile({
							url: url,
							filePath: avatarUrl,
							name: 'iFile',
							formData: {
								token: that.token,
								app_id: that.app_id,
							},
							success: (uploadFileRes) => {
							
								let data = JSON.parse(uploadFileRes.data);
								if(data.code == 1) {
									that.userInfo.avatarUrl = data.data.file_path;
								} else {
									uni.showToast({
										title: "网络数据异常",
										icon: "none"
									})
								}
							}
						});
						// for (var i in tempFilePaths) {
						// 	var file = tempFilePaths[i];
						// 	uni.uploadFile({
						// 		url: url + '/home/ajax/upload_images',
						// 		filePath: file,
						// 		name: 'file',
						// 		formData: post_data,
						// 		success: function(res) {
						// 			console.log(res);
						// 			var data = JSON.parse(res.data);
						// 			uni.hideLoading();
						// 			if (data.status == '0') {
						// 				uni.showToast({
						// 					title: '上传失败',
						// 					icon: 'none',
						// 					duration: 2000
						// 				});
						// 				return false;
						// 			} else {
						// 				callback && callback(data.data);
						// 			}
						// 		},
						// 		fail: function(e) {
						// 			console.log(e);
						// 		},
						// 	})
						// }
				
					}
				})
			},
			
			logout(){
				uni.setStorageSync('token', '')
				console.log("关闭ws" );
						uni.reLaunch({
						url: '/pages/login/h5_login'
					});
			},
			
			handleAgreePrivacyAuthorization() {
				
			},
			getPhoneNumber(e) {
				// console.log(e)
				uni.$u.api.postBindMobile({
					iv: e.detail.iv,
					encrypted_data: e.detail.encryptedData,
					session_key: this.sessionKey,
				}).then(res => {
					uni.showToast({
						title: "绑定成功"
					})
					this.getHttp();
				})
			},
			send(e) {
				let nickname = e.detail.value.nickname;
				if(uni.$u.test.isEmpty(this.userInfo.avatarUrl)) {
					uni.showToast({
						title: "请上传头像",
						icon: "none"
					})
				} else if(uni.$u.test.isEmpty(nickname)) {
					uni.showToast({
						title: "请输入昵称",
						icon: "none"
					})
				} else {
					this.userInfo.nickName = nickname;
					uni.$u.api.postUpdateInfo(this.userInfo).then(res => {
						uni.showToast({
							title: "保存成功",
						})
						// uni.showModal({
						// 	title: '提示',
						// 	content: '保存成功',
						// 	showCancel: false,
						// 	success: function (res) {
						// 		if (res.confirm) {
						// 			// uni.navigateBack();
						// 			// console.log('用户点击确定');
						// 		} else if (res.cancel) {
						// 			// console.log('用户点击取消');
						// 		}
						// 	}
						// });
					})
				}
			},
			onChooseAvatar(e) {
				console.log('eee',e);
				let avatarUrl = e.detail.avatarUrl;
				console.log('rrrr',avatarUrl);
				uni.uploadFile({
					url: this.$setting.baseUrl()+'/file.upload/image',
					filePath: avatarUrl,
					name: 'iFile',
					formData: {
						token: this.token,
						app_id: this.app_id,
					},
					success: (uploadFileRes) => {
						// console.log(uploadFileRes.data);
						let data = JSON.parse(uploadFileRes.data);
						if(data.code == 1) {
							this.userInfo.avatarUrl = data.data.file_path;
						} else {
							uni.showToast({
								title: "网络数据异常",
								icon: "none"
							})
						}
					}
				});
			},
			getSetting() {
				uni.$u.api.getUserSetting().then(res => {
					this.userInfo = res.userInfo;
				})
			},
			getHttp() {
				this.getSetting();
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {

		.form {
			padding: 0 30rpx;
			margin-bottom: 50rpx;
			
			.form-item {
				padding: 30rpx 0;

				.form-label {}

				.form-value {

					.form-value-avatar {
						width: 112rpx;
						height: 112rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
					
					input {
						text-align: right;
					}
				}
			}

			.form-item+.form-item {
				border-top: 1rpx solid #eeeeee;
			}
		}
		
		.form-button {
			background: $uni-color-theme;
			border: 1px solid $uni-color-theme;
			color: #ffffff;
			width: 630rpx;
			height: 90rpx;
			border-radius: 45rpx;
			font-size: 30rpx;
			color: #FFFFFF;
		}
		
		.form-button-hover {
			color: #2b85e4;
			border-color: #2b85e4;
			background: #ecf5ff;
		}
	}
</style>